<template>
    <div class="page">
        <div class="panel">
            <div class="left">
                <img :src="logoImg" class="logo" alt="Logo" />
                <img :src="bigImg" class="big" alt="Background" />
            </div>
            <div class="right">
                <div class="title-container">
                    <h2>禄鹿健康体检系统</h2>
                    <span>V1.0</span>
                </div>
                <div v-if="!qr.qrCodeVisible">
                    <div class="row">
                        <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="user" size="large"
                            clearable />
                    </div>
                    <div class="row">
                        <el-input type="password" v-model="loginForm.password" placeholder="密码" prefix-icon="Lock"
                            size="large" clearable></el-input>
                    </div>
                    <div class="row">
                        <el-button type="primary" class="btn" size="large" @click="login">
                            登陆系统
                        </el-button>
                    </div>
                    <div class="row"><a class="link">二维码登陆</a></div>
                </div>
                <div v-if="qr.qrCodeVisible">
                    <div class="qrCode-container">
                        <img :src="qr.qrCode" height="153" class="qrCode" />
                        <img :src="phoneImg" height="148" />
                    </div>
                    <div class="row"><a class="link">用户名密码登陆</a></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, reactive, ref, ComponentInternalInstance } from 'vue';
// 导入图片
import logoImg from '../../assets/login/logo.png';
import bigImg from '../../assets/login/big.png';
import phoneImg from '../../assets/login/phone.png';
//当用户登陆成功后，需要使用路由对象跳转页面
import router from '../../router/index';
import { isUsername, isPassword } from '../../utils/validate';

const instance = getCurrentInstance();
const proxy = instance?.proxy as any; // 使用可选链和类型断言

const loginForm = reactive({
    username: '' as string | null,
    password: '' as string | null
});

//这部分内容将来给APP程序使用
const qr = reactive({
    qrCodeVisible: false,
    qrCode: '',
    uuid: null,
    qrCodeTimer: null,
    loginTimer: null
});

// 定义登录响应类型
interface LoginResponse {
    result: boolean;
    permissions?: string;
    token?: string;
    message?: string;
}

//用户登录
function login() {
    const username = loginForm.username || '';
    const password = loginForm.password || '';

    if (!isUsername(username)) {
        proxy.$message({
            message: '用户名不正确',
            type: 'error',
            duration: 1200
        });
    }
    else if (!isPassword(password)) {
        proxy.$message({
            message: '密码不正确',
            type: 'error',
            duration: 1200
        });
    }
    else {
        const data = {
            username: username,
            password: password
        };
        proxy.$http('/mis/user/login', 'POST', data, true, (resp: LoginResponse) => {
            if (resp.result) {
                const permissions = resp.permissions || '';
                const token = resp.token || '';
                //向浏览器storage保存令牌和权限列表
                localStorage.setItem('permissions', String(permissions));
                localStorage.setItem('token', String(token));
                //跳转页面
                router.push({ name: 'MisHome' });
            } else {
                proxy.$message({
                    message: resp.message || '登录失败',
                    type: 'error',
                    duration: 1200
                });
            }
        });
    }
}
</script>

<style lang="less" scoped="scoped">
@import url('login.less');
</style>